<template>
  <div>
      <van-nav-bar
      title="济南黑马程序员实战项目-ugo"
      left-text="返回"
      left-arrow
    />
    <div class="header">
      <!-- 轮播tu -->
    <van-swipe class="my-swipe" :autoplay="3000">
      <van-swipe-item  v-for='(item) in messageList' :key="item.id">
        <van-image heigth="100%" width="100%" :src="item.src"></van-image>
    </van-swipe-item>
    </van-swipe>
    </div>
    <!-- 购物车 -->
    <div class="body">
        <div class="body_title">
          {{detailsList.title}}
        </div>
        <p>
          市场价: <span>¥{{detailsList.market_price}}</span>
          销售价: <em class="em">¥ {{detailsList.sell_price}}</em>
        </p>
        <div class="count">
          <span>购买数量</span>
          <!-- 步进器 -->
          <div class="stepper">
            <van-stepper v-model="value" />
          </div>
        </div>
        <div class="btns">
          <van-button type="info" >立即购买</van-button>
          <van-button type="danger" >加入购物车</van-button>
        </div>
    </div>
    <!-- 商品参数 -->
    <div class="footer">
        <div class="footer_title">
          商品参数
        </div>
        <div class="footer_body">
          <p>商品货号: {{detailsList.goods_no}}</p>
          <p>库存情况: {{detailsList.stock_quantity}}</p>
          <p>上架时间: {{detailsList.add_time}}</p>
        </div>
        <div class="footer_btn">
          <van-button :to="{ path: '/goodsdesc'}" class="btn1" square  type="info" size="large" plain  :block='true'>图文介绍</van-button>
          <van-button :to="{ path: '/goodscomments'}" class="btn2" square  type="info" size="large" plain  :block='true' color="#d82727">商品评论</van-button>
        </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
        messageList: [],
        value: 0,
        detailsList: {
        title: String,
        market_price: Number,
        sell_price: Number,
        goods_no: String,
        stock_quantity: Number,
        add_time: String
        }
    };
  },
  created: function() {
      this.getMenuList()
      this.getDetailsList()
  },
  methods: {
      //获取轮播图数据
      getMenuList: async function () {
      const { data: res } = await this.$http.get('/api/getthumimages/40');
      console.log(res);
      this.messageList = res.message;
      },
      //获取购物车数据
     getDetailsList: async function () {
      const { data: res } = await this.$http.get('/api/goods/getinfo/88');
      console.log(res);
      this.detailsList = res.message[0];
      },
  }
};
</script>

<style scoped>
.return {
  display: block;
  position: absolute;
}
.header {
  padding: 10px;
}
.my-swipe {
    height: 230px;
    border: 1px solid #ccc;
    border-radius: 3px;
}
.van-swipe-item {
color: #fff;
font-size: 20px;
line-height: 150px;
text-align: center;
background-color: #27a7f6;
}
.van-image {
  height: 99%;
}
.body {
  /* height: 200px; */
    margin: 0 10px;
    padding: 15px;
    border-radius: 3px;
    border: 1px solid #ccc;
}
.body_title {
    border-bottom: 1px solid #ccc;
}
.body p {
    font-size: 14px;
    margin-top: 15px;
    margin-bottom: 10px;
    margin-left: 10px;
    color: #8f8f94;
}
.body p span {
    text-decoration: line-through;
    margin: 0 10px;
}
.body p .em {
    font-weight: 700;
    font-size: 16px;
    color: red;
    font-style: normal;
}
.count {
  padding: 10px;
}
.count span {
    font-size: 14px;
    color: #8f8f94;
}
.count .stepper {
  display: inline-block;
  vertical-align: middle;
  margin-left: 10px;
}
.btns .van-button {
  margin: 3px 3px;
  height: 33px;
  line-height: 33px;
}

.footer {
    margin: 10px;
    padding: 15px;
    border-radius: 3px;
    border: 1px solid #ccc;
    height: 257px;
}
.footer_title {
    font-size: 17px;
    padding-bottom: 10px;
    border-bottom: 1px solid #ccc;
}
.footer_body {
    padding: 15px;
    border-bottom: 1px solid #ccc;
}
.footer_body p {
    font-size: 14px;
    margin: 10px 0;
    color: #8f8f94;
}
.footer_btn {
  margin-top: 15px;
}
.btn1 {
  height: 39px;
  line-height: 39px;
  border-radius: 5px;
}
.btn2 {
  margin: 10px 0 60px 0;
   height: 39px;
  line-height: 39px;
  border-radius: 5px;
}
</style>
